<template>
	<el-card class="box-card">
		<view slot="header" class="header">
			<text class="header-title">日/月订单数量</text>
			<el-radio-group v-model="data.mode" size="small" @change="getList">
				<el-radio-button label="时"></el-radio-button>
				<el-radio-button label="日"></el-radio-button>
				<el-radio-button label="月"></el-radio-button>
			</el-radio-group>
		</view>
		<view class="box-card-body" style="height: 300px;">
			<qiun-data-charts type="area" :opts="data.opts" :localdata="data.list" />
		</view>
	</el-card>
</template>

<script>
export default {
	name: "getOrderCountGroup",
	props: {

	},
	data() {
		return {
			data:{
				mode:"日",
				list:[],
				opts: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,10,0,15],
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data:[
							{
								tofix: 0
							}
						]
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false,
						},
					},
				}
			},
			loading:false,
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.getList();
		},
		getList(){
			let that = this;
			vk.callFunction({
				url: 'admin/business/kh/stats.getOrderCountGroup',
				data: {
					mode: this.data.mode
				},
				success: (data) => {
					that.data.list = data.list;
				}
			});
		}
	},
	watch: {

	},
	computed: {

	}
};
</script>
<style lang="scss" scoped>
@import "@/pages/stats/common/css/index.scss";
</style>
